<template>
	<div id="list">
		<ul>
			<li v-for="item in admins" :class="{ active: currentSessionId?item.managerName === currentSessionId.managerName:false }"
				v-on:click="changeCurrentSessionId(item)">
				<!--   :class="[item.id === currentSessionId ? 'active':'']" -->
				<img class="avatar" :src="item.avatar" :alt="item.managerName">
				<el-badge :is-dot="idDot[currentUser.managerName + '#'+item.managerName]" class="item"/>
				<p class="name">{{ item.managerName }}</p>
			</li>
		</ul>
	</div>
</template>

<script setup>
import { computed,onMounted,ref} from 'vue'
import { mapState } from 'vuex'
import { useStore } from "vuex";

const store = useStore()
// const {sessions,currentSessionId} = computed({
// 	...mapState('chat',[
// 		'sessions',
// 		'currentSessionId'
// 	])
// })
const currentUser = JSON.parse(localStorage.getItem('userInfo'))
const admins = computed(() => store.state.chat.admins)
const currentSessionId = computed(() => store.state.chat.currentSessionId)
const idDot = computed(() => store.state.chat.idDot)

function changeCurrentSessionId(id) {
	console.log('xxxxxxxxxx',id)
	store.commit('chat/changeCurrentSessionId', id)
	console.log('id2',idDot)
}

onMounted(()=>{
  store.dispatch('chat/initData');

})

</script>


<style lang="less" scoped>
#list {
	li {
		padding: 12px 15px;
		border-bottom: 1px solid #292C33;
		cursor: pointer;

		&:hover {
			background-color: rgba(255, 255, 255, 0.03);
		}
	}

	li.active {
		/*注意这个是.不是冒号:*/
		background-color: rgba(255, 255, 255, 0.1);
	}

	.avatar {
		border-radius: 2px;
		width: 30px;
		height: 30px;
		vertical-align: middle;
	}

	.name {
		display: inline-block;
		margin-left: 15px;
	}
	.item{
		margin-top:-19px
	}
}
</style>
